$(function() {
    $.ajaxSetup({
        type: "post",
        dataType: "json"
    });

    var UserModel = Backbone.Model.extend({
        defaults: {
            name: "",
            imglink: ""
        }
    });

    var UserCollection = Backbone.Collection.extend({
        url: "/cms/blackuser/list",

        perPage: 10,

        total: 0,

        model: UserModel,

        parse: function(res) {
            if(res.ret == 0) {
                this.total = res.res.total;
                this.limit = res.res.limit;
                this.begin = res.res.begin;
                return res.res.data;
            }
        }
    });

    var users = new UserCollection;

    var UserView = Backbone.View.extend({
        className: "user-item",
        template: _.template($("#black-user-template").html()),

        events: {
            "click .set-normal": "setNormal",
            "click .pop-cancel": "cancelPop"
        },

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.$(".show-set-normal").popover({
                content: "<div>确认此用户解除黑名单</div>" +
                '<div><button type="button" class="btn btn-sm btn-success set-normal">确定</button> ' +
                '<button type="button" class="btn btn-sm btn-default pop-cancel">取消</button></div>',
                html: true,
                placement: "bottom"
            });
            return this;
        },

        cancelPop: function() {
            this.$(".show-to-black").popover('hide');
        },

        setNormal: function(e) {
            e.preventDefault();

            var url = "/cms/blackuser/del";
            var data = {
                userid: this.model.get("userid")
            };

            var _this = this;
            $.ajax(({
                url: url,
                data: data,
                success: function(res) {
                    if(res.ret == 0) {
                        alert("执行成功");
                        _this.model.destroy();
                    }
                }
            }));
        }
    });

    var UserListView = Backbone.View.extend({
        template: _.template($("#page-template").html()),

        events: {
            "click .jumpPage": "jumpPage"
        },

        initialize: function() {
            this.listenTo(users, 'add', this.addOne);
            this.listenTo(users, 'reset', this.addAll);
            this.$cel = this.$(".show-container");

            this.fetchData(0, users.perPage);
        },

        fetchData: function(begin, limit) {
            users.fetch({
                data: {
                    begin: begin,
                    limit: limit
                },
                reset: true,
                type: "post"
            });
        },

        render: function() {

        },

        addOne: function(model) {
            var view = new UserView({model: model});
            this.$cel.append(view.render().el);
        },

        addAll: function() {
            this.$cel.empty();
            users.each(this.addOne, this);

            this.refreshPagination();
        },

        refreshPagination: function() {
            var pageTotal = parseInt(users.total / users.limit) + 1;
            var page = parseInt(users.begin / users.limit) + 1;
            this.$(".pagination-box").html(this.template({
                page: page,
                pageTotal: pageTotal
            }));
        },

        jumpPage: function(e) {
            e.preventDefault();

            var page = $(e.currentTarget).data("page");

            this.fetchData((page - 1) * users.perPage, users.perPage);
        }
    });

    function initNormalUser() {
        new UserListView({
            el: $(".black-users")
        });
    }

    initNormalUser();
});